import {Component, OnInit} from '@angular/core';
import {ActivatedRoute, NavigationEnd, Router} from '@angular/router';
import {MENU} from './menu';
import {LocalStorageService} from '../lib/service/local-storage.service';
import {MyShopService} from './myshop.service';
import {adSystemApiUrl, AliyunOssOutputUrl} from '../../config/api';
import {DisplayService} from './display/display.service';
import {Observable} from 'rxjs/Observable';
import {Shop} from './shop';
import {switchMap} from 'rxjs/operators/switchMap';

@Component({
  selector: 'app-member',
  templateUrl: './member.component.html',
  styleUrls: ['./member.component.scss'],
  providers: [
    LocalStorageService, DisplayService, MyShopService
  ]
})
export class MemberComponent implements OnInit {
  shop_list = [];
  head_img = '';
  hadLoginName = '';
  menu = MENU;
  isCollapsed = false;
  AliyunOssOutputUrl = AliyunOssOutputUrl;
  dropShow = false;
  addRouteUrl = '';
  shop = { id: 0, name: ''};
  shops$: Observable<any[]>
  constructor(private localStorageService: LocalStorageService,
              private route: ActivatedRoute,
              private displayService: DisplayService,
              private myshopService: MyShopService,
              private router: Router
  ) {
    this.router.events
      .filter((event) => event instanceof NavigationEnd)
      .subscribe((event: NavigationEnd ) => {
        console.log('menber-constractor', event );
            this.myshopService.getMyShop().subscribe(res => {
              this.shop_list = res.data;
              if ( this.localStorageService.getShop() != null) {
                this.shop = this.localStorageService.getShop();
              } else {
                this.shop = res.data[0];
                this.localStorageService.setShop(this.shop);
              }
              // this.mshopService.setShop(res.data[0].id);
            });
      });
  }

  timer = null;

  hidedrop() {
    console.log('mnmn');
    clearTimeout(this.timer);
    this.timer = setTimeout(() => {
      this.dropShow = false;
    }, 1000);
  }

  opendrop() {
    clearTimeout(this.timer);
    this.dropShow = true;
  }

  clear() {
    this.localStorageService.clearAll();
    location.href = '/login';
  }

  changeCol() {
    this.isCollapsed = !this.isCollapsed;
  }

  ngOnInit() {
    this.head_img = this.localStorageService.getUserInfo().avatar;
    this.hadLoginName = this.localStorageService.getUserInfo().mobile;
    // this.route.params.subscribe(
    //   params => {
    //     this.mshopService.getMyShop().subscribe(res => {
    //       this.shop_list = res.data;
    //       if ( this.localStorageService.getShop() != null) {
    //         this.shop = this.localStorageService.getShop();
    //       }else {
    //         this.shop = res.data[0];
    //         this.localStorageService.setShop(this.shop);
    //       }
    //       // this.mshopService.setShop(res.data[0].id);
    //     });
    //   })
    // );
    // this.mshopService.getMyShop().subscribe(res => {
    //   console.log('res', res);
    //  this.shop_list = res.data;
    //  this.shopName = res.data[0].name;
    //   // @ts-ignore
    //   this.mshopService.getShop(res.data[0].id);
    // });
    this.menu.forEach(item => {
      const href = window.location.href;
      if (item.path && href.indexOf(item.path) >= 0) {
        item.expanded = true;
      } else if (item.children && this.getExpanded(item.children, href)) {
        item.expanded = true;
      } else {
        item.expanded = false;
      }

    });
  }
  activePath ;

  ngDoCheck() {
    if (!this.addRouteUrl) {
      this.addRouteUrl = localStorage.getItem('addRouteUrl');
    }
    this.activePath = location.pathname.substr(0, 15);
  }

  clearActive(path) {
    if (path === '/member/display') {
      this.displayService.id = -999;
    }
  }

  getExpanded(list, href) {
    let result = false;
    list.forEach(item => {
      if (item.path && href.indexOf(item.path) >= 0) {
        result = true;
      } else if (item.children) {
        if (this.getExpanded(item.children, href)) {
          result = true;
        }
      }
    });
    return result;
  }

  expandChange(operateStatus, index) {
    if (operateStatus) {
      this.menu.every((val, idx, array) => {
        if (index !== idx) {
          val.expanded = false;
        }
        return true;
      });
    }
  }

  changeShop(sp) {
    console.log('sp', sp);
    console.log('loparth', location.pathname);
    this.shop = sp;
    const path = location.pathname ;
    // this.mshopService.setShop(sp.id);
    this.localStorageService.setShop(sp);
    // this.mshopService.setShop(sp.id);
    this.router.navigate([path], { queryParams: { id: this.shop.id } });
  }
}
